<template>
  <div class="boss">
    <Top></Top>
    <Banner></Banner>
    <chamber></chamber>
   
 <h3>公告</h3>
  <!-- 各省商会的总区域  -->
<div class="eveny">
     <div class="center"> 
       <!-- 关注各省的标题  -->
    <div class="guan">关注各省商会公告</div>
    <!-- 省会名字  -->
       <div class="shenghui">
        <div class="small" v-for="(item,index) in address" :key="index" @click="provincial(item.provincial)">
          {{ item.provincial }}
</div>
      </div>
  </div>
    </div>
 
</div>
</template>

<script>
import Top from "@/components/Home/TopPage.vue"
import Banner from "@/components/Home/BannerView.vue"
import chamber from "@/components/Home/CommCe.vue"
 import {Notice} from "@/api/index"
export default {
  data(){
   return {
  address:[]
}
  },
 components:{
    Top ,Banner,chamber
 },
 
   //各省会发送请求的
  created(){
    Notice().then((res)=>{
      this.address=res.data
      // console.log(res);
    })
  },
  methods:{
    //点击省会跳详情页
    provincial(id){
  //  console.log(id);
   this.$router.push({path:"/nothree",query:{id}})
}
  }
}
</script>

<style scoped>
  /* 大盒子区域 */
  .boss{
    width: 100%;
    height: 100%;
    padding-bottom: .55rem;
    background-color: #f0eff5;
  }
 h3{
   height: .4rem;
   font-size: 30px;
   color: #5c5d7b;
   line-height: .4rem;
   padding-left: .15rem;
   
 }
  /* 各省商会的总区域 */
  .eveny{
    /* min-height: .5rem; */
    display: flex;
    justify-content: center;
    padding-bottom: .55rem;
  }
  /* 版心区域 */
  .center{
    width: 95%;
   background-color: white;
   border-radius: .1rem;
  }
  /* 关注各省的标题 */
  .guan{
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    font-size: .2rem;

  }
  /* 省会区域 */
  .shenghui{
   display: flex;
    flex-wrap:wrap ;
 
  }
  /* 省会名字 */
  .small{
    min-width:.5rem;
    height: .4rem;
    flex-shrink: 0;
    text-align: center;
    line-height: .4rem;
   font-weight: 700;
   padding: 0 .04rem;
  }
</style>